<script setup>
import { getProductionBlyy } from "@/api/visual/productionBoard";
import { $formatechartData, fontSize } from "@/utils/globalMethod.js";

const optionData = ref([]);
const key = ref(1);
const props = defineProps({
  // 将变量名改为props（复数形式）
  activeLineID: {
    type: String,
    default: "",
  },
  active: {
    type: String,
    default: "",
  },
});
const option = computed(() => ({
  title: {
    text: "不良品项分布图",
    textStyle: {
      color: "#fff",
      fontSize: fontSize(0.16),
    },
  },

  series: [
    {
      name: "不良原因",
      type: "pie",
      center: ["50%", "50%"],
      radius: ["40%", "60%"],
      label: {
        color: "#fff",
        formatter: "{b}: {d}%",
        textStyle: {
          fontSize: fontSize(0.12),
        },
      },
      labelLine: {
        length: 8,
      },
      data: optionData.value,
    },
  ],
}));

const loadData = async () => {
  let params = {};
  if (props.activeLineID !== "") {
    params = { LineName: props.activeLineID };
  }
  if (props.active !== "") {
    params = { gxdl: props.active };
  }

  const { data } = await getProductionBlyy(params);
  optionData.value = $formatechartData(data, "NotWellName", "blsl");
};

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++;
    }, 100);
  });
};
watch(
  () => [props.activeLineID, props.active], // 使用正确的变量名props
  async (newValues, oldValues) => {
    if (newValues !== oldValues || newValues !== oldValues) {
      await loadData();
    }
  },
  { immediate: true }
);
onMounted(loadData);
onMounted(() => {
  window.addEventListener("resize", keyResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", keyResize);
});
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box13 class="ps_pd10" :key="key">
      <ps-chart2 :option="option"></ps-chart2>
    </dv-border-box13>
  </div>
</template>

<style scoped lang="scss"></style>
